<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <div class="adv">
            <img src="../img/adv.jpg" alt="" class="adv-img" />
        </div>
        <div class="main">
            <img src="../img/main1.jpg" alt="" class="main-img" />
            <img src="../img/main2.jpg" alt="" class="main-img" />
            <img src="../img/main3.jpg" alt="" class="main-img" />
        </div>
    </div>
    <div class="toTop">回到<br />顶端</div>
</body>
<script>
    //1获得adv的top和left值
    let adv = document.querySelector('.adv')
    let toTop = document.querySelector('.toTop')
    let tops = parseInt(getComputedStyle(adv, null).top)
    let lefts = parseInt(getComputedStyle(adv, null).left)
    let html = document.documentElement
    let scrollTop
    let id
    //2监听窗口滚动事件
    window.onscroll = function () {
        scrollTop = html.scrollTop
        console.log(scrollTop)
    }
    //回到顶端
    toTop.onclick = function () {
        if (id) {
            clearInterval(id)
        }
        id = setInterval(function () {
            scrollTop -= 10
            if (scrollTop <= 0) {
                clearInterval(id)
                html.scrollTop = 0
                return
            }
            console.log(scrollTop)
            html.scrollTop = scrollTop
        }, 1)
    }
</script>

</html>